<template>
 <div class="cmt-container">
     <h3>发表评论</h3>
     <hr>
     <textarea v-model="msg" name="" @keydown.enter="sendMsg" placeholder="请输入你的评论(最多可吐槽120字)" maxlength="120"></textarea>
     <mt-button type="primary"  size="large" @click="sendMsg">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,id) in commentShow" :key="id">
                <div class="cmt-title">
                    第{{id+1}}楼&nbsp;&nbsp;用户:{{item.name}}&nbsp;&nbsp;发表时间:{{item.time|dataFormat}}
                </div>
                <div class="cmt-body" v-html="item.content"></div>
            </div>
            
        </div>

     <mt-button type="danger" size="large" @click="addMore(pageIndex)" plain>加载更多</mt-button>
 </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default{
   data() {
    return {
        pageIndex:1,
        commentShow:null,
        msg:'',
        commentSum:[
            [
                {name:'故事',time:'2019-2-5 22:25:03',content:'谁都不是好玩的'},
                {name:'牛奶',time:'2019-2-5 12:02:01',content:'哥只是传说'},
                {name:'徐子',time:'2019-2-5 15:02:00',content:'你牛逼啊'},
                {name:'如意',time:'2019-2-5 24:00:00',content:'你的报应就是我'},
                {name:'敬中文',time:'2019-2-5 15:02:03',content:'生日快乐'},
                {name:'杨涛',time:'2019-8-5 01:02:03',content:'手势摆起来'},
                {name:'北京',time:'2019-9-5 02:02:03',content:'语文老师喊你去上课，你跑哪去'},
                {name:'大图',time:'2019-10-5 03:02:03',content:'九年级还要上地理和生物呀'},
                {name:'用户',time:'2019-11-5 04:02:03',content:'你们个个都是人才哎呀'},
                {name:'匿名',time:'2019-10-2 05:02:03',content:'我作弊被发现了'},
            ],
            [
                {name:'就玩玩',time:'2018-2-5 22:25:03',content:'中秋快乐'},
                {name:'cici',time:'2018-2-5 12:02:01',content:'锄禾日当午，谁都不怕苦'},
                {name:'哈哈啊',time:'2018-2-5 15:02:00',content:'你倒是换个手机呀'},
                {name:'咋新',time:'2018-2-5 24:00:00',content:'玩开心'},
                {name:'t丰',time:'2018-2-5 15:02:03',content:'哪里是这样子吗'},
                {name:'学霸',time:'2018-8-5 01:02:03',content:'早时候就有你把'},
                {name:'叶子',time:'2018-9-5 02:02:03',content:'我这里是拿剪刀剪的'},
                {name:'民族',time:'2018-10-5 03:02:03',content:'你有本事扔几个鸡蛋试试看'},
                {name:'江涛',time:'2018-11-5 04:02:03',content:'突然觉得不想吃了'},
                {name:'肖先生',time:'2018-10-2 05:02:03',content:'新零售吗'},
            ],
              [
                {name:'排比',time:'2017-2-5 22:25:03',content:'我的唐尼'},
                {name:'不离不去',time:'2017-2-5 12:02:01',content:'穷成这样了，还吃泡面'},
                {name:'芋头',time:'2017-2-5 15:02:00',content:'一个骨头不停的啃呀'},
                {name:'王苕涛',time:'2017-2-5 24:00:00',content:'哥，我问你牛逼不牛逼'},
                {name:'之心',time:'2017-2-5 15:02:03',content:'吃完记得刷碗'},
                {name:'估计',time:'2017-8-5 01:02:03',content:'记得点赞哟'},
                {name:'小小明',time:'2017-9-5 02:02:03',content:'这个是啥玩意，这么难吃'},
                {name:'阿昌',time:'2017-10-5 03:02:03',content:'你吃一个试试看'},
                {name:'山东青岛',time:'2017-11-5 04:02:03',content:'哈哈哈哈'},
                {name:'白天',time:'2017-10-2 05:02:03',content:'还行吧'},
            ]
        ]
    }
},
methods:{
    sendMsg(){
        this.commentShow.unshift({name:'匿名',time:Date.now(),content:this.msg});
        this.msg="";
    },
    addMore(ids){
        // 散播进去 a.push.apply(a,b);也行
        if(ids>=3){
            Toast('已经到底了');
        }else{
            this.commentShow.push(...this.commentSum[ids]);
            this.pageIndex++;
        }
        
    }
},
mounted(){
    this.commentShow=this.commentSum[0];
},
props:['id']
}
</script>
<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 90px;
            margin: 0;
        }
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                font-size: 13px;
                .cmt-title{
                    line-height: 30px;
                    background-color: #ccc;
                }
                .cmt-body{
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>